<template>
  <Portlet title="代收款" >
    <span slot="tools">
      <el-popover
        class="pull-right"
        placement="right"
        width="400"
        trigger="hover">
                    <span>
                      ①该单需要用户扫描支付成功后师傅方可签收；<br>
                      ②用户支付成功后代收金额进入钱包可以提现；<br>
                      ③每笔代收款有0.28%的手续费，由三方支付平
                        台双乾支付收取。如代收1000.00元，用户支
                        付1000.00元，钱包实际到账997.20元。
                    </span>
            <a slot="reference" href="javascript:;" class="green-color" style="font-size: 14px;text-decoration: none">代收款说明<i
              class="el-icon-question"></i></a>
          </el-popover>
      <el-button type="primary" size="small" @click="submit" v-if="collectionStatus && orderState">取消代收款</el-button>
    </span>
    <el-row :gutter="15">
      <el-col :span="24">
        <el-table
          :data="orderCollectionList"
          border
          :summary-method="getSummaries"
          show-summary
          :header-cell-style="{'text-align': 'center'}"
          :cell-style="{'text-align': 'center'}"
          style="width: 100%">
          <el-table-column
            prop="clearingObject"
            align="center"
            label="结算主体">
          </el-table-column>
          <el-table-column
            prop="costName"
            label="费用名称">
          </el-table-column>
          <el-table-column
            prop="collectionMoney"
            align="center"
            label="费用金额">
          </el-table-column>
          <el-table-column
            prop="collectionStatus"
            label="代收状态">
            <template slot-scope="scope">
              {{scope.row.collectionStatus}}
            </template>
          </el-table-column>
          <el-table-column
            prop="payType"
            label="代收方式">
          </el-table-column>
          <el-table-column
            prop="practicalMoney"
            align="center"
            label="实际收款">
          </el-table-column>
          <el-table-column
            prop="serviceCharge"
            align="center"
            label="手续费">
          </el-table-column>
          <el-table-column
            prop="memo"
            label="代收备注">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-dialog
      width="390px"
      title="取消代收款"
      :visible.sync="innerVisible"
    >
      <div style="width: 100%;text-align: center">
        <i class="fa-icon fa-icon-md fa-icon-fourColumn-two"></i>
        <span style="color: #475669">确定要取消代收款服务吗？取消后该订单将不再提供代收款服务，并且不能再次发起代收款服务。</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="delDataPost($event)" :loading="loading">确 定</el-button>
      </div>
    </el-dialog>
  </Portlet>
</template>
<script>
import {dotData, alert} from '@/utils'
import {filterDataBaseDictionary, decimalNumFilter} from '@/filters'
export default {
  name: 'paymentForGoods',
  components: {
  },
  filters: {
    filterDataBaseDictionary
  },
  props: {
    orderDetail: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      innerVisible: false
    }
  },
  computed: {
    orderCollectionList() {
      let arr = dotData(this.orderDetail, 'orderCollectionList') || []
      arr.forEach(item => {
        switch (parseInt(item.collectionStatus)) {
          case 0 :
            item.collectionStatus = '未收款'
            break
          case 1 :
            item.collectionStatus = '已收款'
            break
          case 2 :
            item.collectionStatus = '取消代收款'
            break
        }
      })
      return dotData(this.orderDetail, 'orderCollectionList') || []
    },
    collectionStatus() {
      let collectionStatus = dotData(this.orderDetail.orderCollectionList, '[0].collectionStatus')
      if (collectionStatus === 0) {
        return true
      } else {
        return false
      }
    },
    fhbOrderCollection() {
      return dotData(this.orderDetail, 'fhbOrderCollection') || {}
    },
    orderState() {
      let orderState = dotData(this.orderDetail, 'fhbOrder.orderStatus')
      // 服务中：录单、入库、出库、到件、出发、提货、上门
      let orderStateArr = ['service|100', 'service|150', 'service|200', 'service|550', 'service|570', 'service|600', 'service|700']
      if (orderStateArr.indexOf(orderState) < 0) {
        return false
      } else {
        return true
      }
    }
  },
  methods: {
    decimalNumFilter,
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        if (index === 7) {
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          let num = this.decimalNumFilter(sums[index])
          sums[index] = num
          sums[index] += ' 元'
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    submit() {
      this.innerVisible = true
    },
    delDataPost(event) {
      let id = dotData(this.orderDetail, 'fhbOrder.id')
      this.loading = true
      this.$ajax.post('/ms-fahuobao-order/FhbOrder/cancelCollection', {orderId: id}).then(response => {
        this.loading = false
        if (response.success) {
          alert('取消代收款成功！', '', 'success')
          this.cancel()
        }
      })
    },
    cancel() {
      this.innerVisible = false
    }
  }
}
</script>
